
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>


  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />

  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <el-form :inline="true" :model="query" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="query.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button  type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button  type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="直播的id">
      </el-table-column>
      <el-table-column
        prop="roomName"
        header-align="center"
        align="center"
        label="直播间名称">
      </el-table-column>
      <el-table-column
        prop="doctorId"
        header-align="center"
        align="center"
        label="创建的医生id">
      </el-table-column>
      <el-table-column
        prop="roomCreateTime"
        header-align="center"
        align="center"
        label="直播间创建时间">
      </el-table-column>
      <el-table-column
        prop="roomTitle"
        header-align="center"
        align="center"
        label="直播间标题">
      </el-table-column>
      <el-table-column
        prop="roomCoverImg"
        header-align="center"
        align="center"
        label="直播间封面">
      </el-table-column>
      <el-table-column
        prop="watchNum"
        header-align="center"
        align="center"
        label="观看人数">
      </el-table-column>
      <el-table-column
        prop="doctorName"
        header-align="center"
        align="center"
        label="医生名称">
      </el-table-column>
      <el-table-column
        prop="roomStatus"
        header-align="center"
        align="center"
        label="直播状态:   0:未开始   1:正在进行">
      </el-table-column>
      <el-table-column
        prop="hospitalId"
        header-align="center"
        align="center"
        label="隶属医院">
      </el-table-column>
      <el-table-column
        prop="departmentId"
        header-align="center"
        align="center"
        label="隶属科室">
      </el-table-column>
      <el-table-column
        prop="class01"
        header-align="center"
        align="center"
        label="预留01">
      </el-table-column>
      <el-table-column
        prop="class02"
        header-align="center"
        align="center"
        label="预留02">
      </el-table-column>
      <el-table-column
        prop="class03"
        header-align="center"
        align="center"
        label="预留03">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>



    <el-dialog
            :title="!dataForm.id ? '新增' : '修改'"
            :close-on-click-modal="false"
            :visible.sync="visible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
                                                <el-form-item label="直播间名称" prop="roomName">
              <el-input v-model="dataForm.roomName" placeholder="直播间名称"></el-input>
            </el-form-item>
                                        <el-form-item label="创建的医生id" prop="doctorId">
              <el-input v-model="dataForm.doctorId" placeholder="创建的医生id"></el-input>
            </el-form-item>
                                        <el-form-item label="直播间创建时间" prop="roomCreateTime">
              <el-input v-model="dataForm.roomCreateTime" placeholder="直播间创建时间"></el-input>
            </el-form-item>
                                        <el-form-item label="直播间标题" prop="roomTitle">
              <el-input v-model="dataForm.roomTitle" placeholder="直播间标题"></el-input>
            </el-form-item>
                                        <el-form-item label="直播间封面" prop="roomCoverImg">
              <el-input v-model="dataForm.roomCoverImg" placeholder="直播间封面"></el-input>
            </el-form-item>
                                        <el-form-item label="观看人数" prop="watchNum">
              <el-input v-model="dataForm.watchNum" placeholder="观看人数"></el-input>
            </el-form-item>
                                        <el-form-item label="医生名称" prop="doctorName">
              <el-input v-model="dataForm.doctorName" placeholder="医生名称"></el-input>
            </el-form-item>
                                        <el-form-item label="直播状态:   0:未开始   1:正在进行" prop="roomStatus">
              <el-input v-model="dataForm.roomStatus" placeholder="直播状态:   0:未开始   1:正在进行"></el-input>
            </el-form-item>
                                        <el-form-item label="隶属医院" prop="hospitalId">
              <el-input v-model="dataForm.hospitalId" placeholder="隶属医院"></el-input>
            </el-form-item>
                                        <el-form-item label="隶属科室" prop="departmentId">
              <el-input v-model="dataForm.departmentId" placeholder="隶属科室"></el-input>
            </el-form-item>
                                        <el-form-item label="预留01" prop="class01">
              <el-input v-model="dataForm.class01" placeholder="预留01"></el-input>
            </el-form-item>
                                        <el-form-item label="预留02" prop="class02">
              <el-input v-model="dataForm.class02" placeholder="预留02"></el-input>
            </el-form-item>
                                        <el-form-item label="预留03" prop="class03">
              <el-input v-model="dataForm.class03" placeholder="预留03"></el-input>
            </el-form-item>
                        </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>



  </div>




  <script>
      new Vue({
          el: '#app',

              data () {
                  return {

                      baseUrl: 'http://localhost:88/api',
                      query: {
                          key: ''
                      },
                      dataList: [],
                      pageIndex: 1,
                      pageSize: 10,
                      totalPage: 0,
                      dataListLoading: false,
                      dataListSelections: [],
                      addOrUpdateVisible: false,


                      visible: false,
                      dataForm: {
                                                                  id: 0,
                                                                                        roomName: '',                                                                                        doctorId: '',                                                                                        roomCreateTime: '',                                                                                        roomTitle: '',                                                                                        roomCoverImg: '',                                                                                        watchNum: '',                                                                                        doctorName: '',                                                                                        roomStatus: '',                                                                                        hospitalId: '',                                                                                        departmentId: '',                                                                                        class01: '',                                                                                        class02: '',                                                                                        class03: ''                                                      },
                  dataRule: {
                                                                                                                              roomName: [
                              { required: true, message: '直播间名称不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  doctorId: [
                              { required: true, message: '创建的医生id不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  roomCreateTime: [
                              { required: true, message: '直播间创建时间不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  roomTitle: [
                              { required: true, message: '直播间标题不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  roomCoverImg: [
                              { required: true, message: '直播间封面不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  watchNum: [
                              { required: true, message: '观看人数不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  doctorName: [
                              { required: true, message: '医生名称不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  roomStatus: [
                              { required: true, message: '直播状态:   0:未开始   1:正在进行不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  hospitalId: [
                              { required: true, message: '隶属医院不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  departmentId: [
                              { required: true, message: '隶属科室不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  class01: [
                              { required: true, message: '预留01不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  class02: [
                              { required: true, message: '预留02不能为空', trigger: 'blur' }
                          ],
                                                                                                                                  class03: [
                              { required: true, message: '预留03不能为空', trigger: 'blur' }
                          ]                                                                  }
              }
              },


          //方法集合
          methods: {

              //查询列表
              getDataList () {
                  axios.get(`${this.baseUrl}/roomLiving/livestreaming/list?page=${this.pageIndex}&limit=${this.pageSize}&key=${this.query.key}`)
                          .then(({data}) => {
                              console.log("查询列表展示",data);
                              if (data && data.code === 0) {
                                  this.dataList = data.page.list
                                  this.totalPage = data.page.totalCount
                              } else {
                                  this.dataList = []
                                  this.totalPage = 0
                              }
                              this.dataListLoading = false
                          })
              },

              //修改单独返回
              init (id) {
                  this.dataForm.id = id || 0
                  this.visible = true
                  this.$nextTick(() => {
                      this.$refs['dataForm'].resetFields()
                      if (this.dataForm.id) {
                          axios.get(`${this.baseUrl}/roomLiving/livestreaming/info/${this.dataForm.id}`)
                                  .then(({data}) => {
                                      console.log("修改单独返回展示",data);
                                      if (data && data.code === 0) {
                                                                                                                                                                                                                  this.dataForm.roomName = data.liveStreaming.roomName
                                                                                                                                                                        this.dataForm.doctorId = data.liveStreaming.doctorId
                                                                                                                                                                        this.dataForm.roomCreateTime = data.liveStreaming.roomCreateTime
                                                                                                                                                                        this.dataForm.roomTitle = data.liveStreaming.roomTitle
                                                                                                                                                                        this.dataForm.roomCoverImg = data.liveStreaming.roomCoverImg
                                                                                                                                                                        this.dataForm.watchNum = data.liveStreaming.watchNum
                                                                                                                                                                        this.dataForm.doctorName = data.liveStreaming.doctorName
                                                                                                                                                                        this.dataForm.roomStatus = data.liveStreaming.roomStatus
                                                                                                                                                                        this.dataForm.hospitalId = data.liveStreaming.hospitalId
                                                                                                                                                                        this.dataForm.departmentId = data.liveStreaming.departmentId
                                                                                                                                                                        this.dataForm.class01 = data.liveStreaming.class01
                                                                                                                                                                        this.dataForm.class02 = data.liveStreaming.class02
                                                                                                                                                                        this.dataForm.class03 = data.liveStreaming.class03
                                                                                                                          }
                                  })
                      }
                  })
              },

              //登录
              login(){
                  axios.post(`${this.baseUrl}/roomLiving/livestreaming/info`,this.dataForm)
                          .then(({data}) => {
                              console.log("登录返回信息展示",data);
                              if (data && data.code === 0) {
                                  //在这里赋值  localStorage.setItem()

                                  this.$message({
                                          message: '登录成功',
                                          type: 'success',
                                          duration: 1500,
                              });
                                  //在这里跳转页面  location = "";

                              } else {
                                  this.$message.error(data.msg)
                              }
                          })
              },



              // 表单提交
              dataFormSubmit () {
                  this.$refs['dataForm'].validate((valid) => {
                          if (valid) {
                      axios.post(`${this.baseUrl}/roomLiving/livestreaming/${!this.dataForm.id ? 'save' : 'update'}`)
                              .then(({data}) => {
                                  console.log("添加/修改返回信息展示",data);
                                  if (data && data.code === 0) {
                                      this.$message({
                                              message: '操作成功',
                                              type: 'success',
                                              duration: 1500,
                                              onClose: () => {
                                          this.visible = false
                                          this.$emit('refreshDataList')
                                      }
                                  })
                                  } else {
                                      this.$message.error(data.msg)
                                  }
                              })
                  }
                  })
              },


              // 每页数
              sizeChangeHandle (val) {
                  this.pageSize = val
                  this.pageIndex = 1
                  this.getDataList()
              },
              // 当前页
              currentChangeHandle (val) {
                  this.pageIndex = val
                  this.getDataList()
              },
              // 多选
              selectionChangeHandle (val) {
                  this.dataListSelections = val
              },
              // 新增 / 修改
              addOrUpdateHandle (id) {
                  this.dataForm = {};
                  this.visible = true;
              },

              //删除方法
              deleteHandle (id) {
                  var ids = id ? [id] : this.dataListSelections.map(item => {
                      return item.id
                  })
                  this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          type: 'warning'
              }).then(() => {
                      axios.post(`${this.baseUrl}/roomLiving/livestreaming/delete`,ids)
                              .then(({data}) => {
                                  if (data && data.code === 0) {
                                      this.$message({
                                              message: '操作成功',
                                              type: 'success',
                                              duration: 1500,
                                              onClose: () => {
                                          this.getDataList()
                                      }
                                  })
                                  } else {
                                      this.$message.error(data.msg)
                                  }
                              })
                  })
              }

          },
          created() {
              this.getDataList();

          },
      })
  </script>



</body>
</html>







